<template>
    <a-sub-menu key="sub1">
        <template #title>实时路况</template>
        <a-menu-item key="setting:1" @click="viewTraffic">查看路况</a-menu-item>
        <a-menu-item key="setting:2" @click="removeDrawLayer"> 清除路况 </a-menu-item>
    </a-sub-menu>
</template>
<script setup>
import { ref, toRefs } from 'vue';
/* 导入查询的模块 */
import { Query } from 'assets/libs/utils/ES6Query.js'
import { useMapStore } from 'stores/mapStore.js'
/* 绘画图层 */
const drawLayer = ref(null)
/* 拿到地图容器 */
const { map } = toRefs(useMapStore());
/* 清除路况 */
const removeDrawLayer = () => {
    map.value.removeLayer(drawLayer.value);
}
/* 查询并添加到地图 */
const viewTraffic = () => {
    Query.queryByLayerID(
        {
            service: {
                docName: "guanggu",
                /* 道路图层在第一个 */
                layerId: 1
            },
            /* 拿到查询到的数据 */
            callback: (data) => {
                //初始化Zondy.Format.PolygonJSON类
                var format = new Zondy.Format.PolygonJSON();
                //将MapGIS要素JSON反序列化为ol.Feature类型数组
                var features = format.read(data);
                // console.log(features);
                //实例化一个矢量图层drawLayerr用于高亮显示结果
                var drawSource = new ol.source.Vector({
                    wrapX: false
                });
                /* 根据车流量设置不同的颜色 */
                features.forEach((item) => {
                    let color
                    const flow = item.values_.values_.车流量
                    //（500-1000为绿色；1000-1500为黄色；1500-2000位红色）
                    if (flow < 1000) {
                        color = "#4fd27d";
                    }
                    else if (flow >= 1000 && flow < 1500) {
                        color = "#ffd045";
                    }
                    else if (flow >= 1500 && flow < 2000) {
                        color = "#e80e0e";
                    } else {
                        color = "#b40000";
                    }
                    item.setStyle(new ol.style.Style({
                        //边线样式
                        stroke: new ol.style.Stroke({
                            color,
                            width: 8
                        })
                    }))
                    drawSource.addFeature(item)
                })
                drawLayer.value = new ol.layer.Vector({
                    source: drawSource,
                });
                /* 添加到地图 */
                map.value.addLayer(drawLayer.value);
            }
        })
}
</script>